<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />		
		<meta name="author" content="" />
		<meta name="last-edit" content="2023.03.09" />
		<title>jQuery入门</title>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
      window.jQuery || document.write(`<script type="text/javascript" src="./libs/jquery2.0.0.min.js">`)
    </script>
		<style type="text/css">
      
			.warpper{
        width: 200px;
        height: 200px;
        background-color: red;
        border-radius: 100px;
      }
		</style>

		<body>
      <button id="btn1">jQuery点击事件</button>
      <button id="btn2">jQuery绑定点击事件</button>
      <button id="btn3">jQuery绑定多个事件</button>
      <input id="name" value="11123232" >777777
      <div id="div">
        <!-- <button id="btn4">jQuery点击事件</button> -->
      </div>

      <button id="showDiv">显示div</button>
      <button id="hideDiv">隐藏div</button>
      <button id="fadeInDiv">淡入div</button>
      <button id="fadeOutDiv">淡出div</button>
      <div class="warpper"></div>

      <div id="form">
        <p id="nickName" class="qqq">张三</p>
        <p id="nickName2" class="qqq">李四</p>
      </div>
			<script type="text/javascript">
				// jQuery选择器
				// 1.基本选择器，对应css标签，class，id，并集，交集，通配符选择器
				$('p')  // css 标签选择器
        $('.class') // css class选择器
        $('#id')  // css id选择器
        $('#id, .class')  // css 并集选择器
        $('#id.class')  // css 交集选择器
        $('*')  // css 通配符选择器

        // 2.层次选择器，对应css后代，子集，相邻兄弟，通用兄弟选择器
        $('.class1 .class2')  // css 后代选择器
        $('.class1 > .class2')  // css 子选择器
        $('.class1 + .class2')  // css 相邻兄弟选择器
        $('.class1 ~ .class2')  // css 通用兄弟选择器

        // 3.基本过滤选择器，对应css结构性伪类，动态伪类
        $('.class:first')  // css 结构性伪类
        $('.class:focus')  // css 动态伪类

				// 4.可见性过滤选择器，特殊
        $('.class:visible') // 所有可见元素
        $('.class:hidden')  // 所有隐藏元素


        // jQuery事件
        $('#btn1').click(function(){
          console.log('jQuery点击事件');
        })
        
        $('#name').keydown(function(event){
          console.log('jQuery键盘事件', event);
        })

        document.querySelector('#name').onkeydown = function(event){
          console.log('JS键盘事件', event);
        }

        // 绑定单个事件
        $('#btn2').on('click', function(){
          console.log('jQuery绑定点击事件');
          $('#div').append(' <button id="btn4">jQuery点击事件</button>')
        })
        $('#btn4').click(function(){
          console.log('jQuery on绑定btn4点击事件');
        })

        // 给未来元素绑定事件
        $('#div').on('click', '#btn4', function(){
          console.log('jQuery on绑定btn4点击事件');
          // 移除绑定事件
          $('#btn3').off('click')
        })

        let clickEvent = function(){}
        document.addEventListener('click', clickEvent)
        document.removeEventListener('click', clickEvent)

        // $('#btn4').bind('click', function(){
        //   console.log('jQuery bind绑定btn4点击事件');
        // })

        // 绑定多个事件
        $('#btn3').on({
          click: function(){
            console.log('jQuery绑定多个事件-click');
          },
          mouseover: function(){
            console.log('jQuery绑定多个事件-mouseover');
          }
        })



        // 元素显示隐藏
        $('#showDiv').click(function(){
          $('.warpper').show(2000)
        })
        $('#hideDiv').click(function(){
          $('.warpper').hide(3000)
        })
        $('#fadeInDiv').click(function(){
          $('.warpper').fadeIn(3000, function(){
            console.log('div淡入');
          })
        })
        $('#fadeOutDiv').click(function(){
          $('.warpper').fadeOut(2000, function(){
            console.log('div淡出');
          })
        })
        $('#fadeOutDiv').mouseover(function(){
          console.log(222);
          $('#fadeOutDiv').css({'font-size': 18, 'color': 'red'})
        })

        
        
			</script>
		</body>
	</head>

</html>